<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-27 19:39:40
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-11-05 10:20:15
 * @FilePath: \票务管理\app\ticketing-management\vue-project\src\views\home\Station\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="train-container">
        <div style="width: 100%;height:100%;padding: 10px;">
            <div class="isWide">
                <div class="header-left">
                    <div class="trainType">
                        车站首字母
                    </div>
                    <a-space>
                        <a-select v-model:value="SelectValue" style="width: 105px" @change="handleChange">
                            <a-select-option value="全部">全部</a-select-option>
                            <template v-for="(item) in TabLe.datalist">
                                <a-select-option :value="item.name">{{ item.name }}</a-select-option>
                            </template>
                        </a-select>
                    </a-space>
                </div>
                <div class="header-right">
                    <a-checkbox @change="FlageChange">启用</a-checkbox>
                    <a-input-search class="searchInp" placeholder="搜索ID/车站" style="width: 135px" @search="onSearch" />
                    <a-button @click="addTable" type="primary" style="background: #1BA9BA;">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增车站
                    </a-button>
                </div>
            </div>
            <div class="train-main">
                <el-table :data="TabLe.tableData" stripe style="width: 100%">
                    <el-table-column align="center" prop="id" label="ID" width="150px" />

                    <el-table-column borderLeft="solid 1px #ccc" align="center" prop="name" label="车站" />
                    <el-table-column align="center" prop="status" label="状态">
                        <template #default="{ row }">
                            <div style="font-size: 12px;">
                                <el-switch v-model="row.status" active-value="1" inactive-value="0" class="ml-2"
                                    style="--el-switch-on-color: #1BA9BA; --el-switch-off-color: #ACB1BF" />
                                {{ row.status == '1' ? "启用" : "停用" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div style="text-align: center;" v-if="scope.row.status == '1'">
                                <el-tooltip content="编辑">
                                    <el-icon size="17px" @click="edit(scope)" color="#1BA9BA">
                                        <Edit />
                                    </el-icon>
                                </el-tooltip>
                                <a-popconfirm style="width: 120px;" title="确认要删除啊?" ok-text="是" cancel-text="否"
                                    @confirm="confirmDel(scope)" @cancel="cancel">
                                    <el-icon style="margin-left: 10px;" size="17px" color="#1BA9BA">
                                        <Delete />
                                    </el-icon>
                                </a-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block">
                    <el-config-provider :locale="zhCn">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="page.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="page.lengths">
                        </el-pagination>
                    </el-config-provider>
                </div>
            </div>
        </div>
        <a-modal style="width: 400px;" v-model:open="open" title="新增车站" cancelText="取消" okText='确认' @cancel="cancelON"
            @ok="handleOk">
            <div class='modelDiv'>
                <span>车站</span> <a-input style="width: 160px;margin-left:9px" v-model:value="TabTypeList.data"
                    placeholder="请输入车站名称" />
            </div>
        </a-modal>
    </div>
</template>
<script setup lang="ts">

import * as api from "../../../api/index"
import { PlusOutlined } from '@ant-design/icons-vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import loca from 'ant-design-vue/es/locale/zh_CN';
import { onMounted, onCreated, onBeforeUnmount, reactive, ref, watch, computed } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { useStation } from '@/modules/station'
import { message } from 'ant-design-vue';

const route = useRoute()
const router: any = useRouter()
const SelectValue: any = ref('全部')
const Station = useStation()
const open = ref<boolean>(false);
const key = 'updatable';

const page = reactive({
    currentPage: Station.currentPage,
    pageSize: Station.pageSize,
    lengths: 0
})


const TabLe = reactive({
    tableData: [], //分页完的数据
    datalist: [] //所有数据
})

// 编辑/新增
const TabTypeList = reactive({
    type: 'add',
    data: ''
})

// 每页的条数
const handleSizeChange = (val: any) => {
    console.log(`每页 ${val} 条`);
    page.pageSize = val
    Station.setPageSize(val)
    Station.setCurrentPage(1)
    page.currentPage = 1
    getStations()
}
// 当前页
const handleCurrentChange = (val: any) => {
    console.log(`当前页: ${val}`);
    page.currentPage = val
    Station.setCurrentPage(val)
    getStations()
}


const getStations = async () => {
    await Station.getStation()
    TabLe.tableData = Station.list
    TabLe.datalist = Station.datalist
    page.lengths = Station.datalist.length
}


const handleChange = (value: string) => {
    if (value == "全部") {
        page.pageSize = 5
        getStations()
    } else {
        page.pageSize = 10
        let TableFilter = TabLe.datalist.filter((item: any) => item.name == value)
        TabLe.tableData = TableFilter
        page.lengths = TableFilter.length
    }
}
const FlageChange = (checkedValue: any) => {
    console.log(checkedValue.target.checked, "checkedValue")
    if (checkedValue.target.checked == true) {
        TabLe.tableData.forEach((item: any) => {
            item.status = '1'
            console.log(item)
        })
    } else {
        getStations()
    }
}
const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    let search: any = []
    if (searchValue == undefined) {

    } else {
        if (searchValue != '') {
            TabLe.datalist.forEach((item: any) => {
                if (item.name.includes(searchValue)) {
                    search.push(item)
                }
            })
            TabLe.tableData = search
            page.lengths = search.length
        } else {
            getStations()
        }
    }


};


const cancelON = () => {
    message.loading({ content: 'Loading...', key });
    setTimeout(() => {
        message.error({ content: '新增失败!', key, duration: 2 });
    }, 1000);
}


const handleOk = async (e: MouseEvent) => {
    let datas = TabTypeList.data
    let data = await api.postStation('http://localhost:7001/v1/api/station', { datas })
    message.loading({ content: 'Loading...', key });
    if (data.data.code == 200) {
        setTimeout(() => {
            message.success({ content: '新增成功!', key, duration: 2 });
            open.value = false;
            getStations()
        }, 500);
    }

};

// 新增
const addTable = () => {
    open.value = true;
}
// 编辑
const edit = (value: any) => {
    console.log(value.row);
}
// 删除
const confirmDel = async (e: any) => {
    message.success('确认删除');
    let data = await api.deleteStation(`http://localhost:7001/v1/api/station/${e.row.id}`)
    console.log(data)
    if (data.data.code == 200) {
        message.success('删除成功');
        getStations()
    }
};

const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('取消删除');
};

onMounted(() => {
    getStations()
})

</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    width: 600px;
}

::v-deep .el-table th.el-table__cell {
    background-color: #d8dbe2;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.modelDiv {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    border-top: solid 1px #d8dbe2;
    border-bottom: solid 1px #d8dbe2;
}

.train-container {
    width: 100%;
    height: 600px;
    background-color: #fff;

    .el-pagination {
        justify-content: flex-end;
    }

    .isWide {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .header-left {
            width: 180px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-right {
            width: 320px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
    }
}
</style>